<template>
	<view class="question">
		<view class="que-type">
			<view class="type-title">类型</view>
			<view class="type-wa">
				<view class="type-but" @click="changeMessType(1)" :class="messtype == 1 ? 'select':''">接单问题</view>
				<view class="type-but" @click="changeMessType(2)" :class="messtype == 2 ? 'select':''">费用问题</view>
				<view class="type-but" @click="changeMessType(3)" :class="messtype == 3 ? 'select':''">其他</view>
			</view>
			<view class="que-iphone">
				<view class="type-title">联系电话</view>
				<input type="text" v-model="mobile" placeholder="请填写您的联系电话" class="iphone-input" />
			</view>
			<view class="que-iphone">
				<view class="type-title">反馈内容</view>
				<textarea type="text" placeholder="请输入反馈内容（150字以内" :maxlength="len" v-model="message" class="iphone-tar" />
				<view class="tar-num">{{ contentLength }}/150</view>
		</view>
		<view class="fk_img">
			<view class="evaluate-c-b">
				<view class="goods-img-item" v-for="(item, key) in images" :key="key">
					<image class="del" src="/static/img/del.png" mode="" @click="delImage(item,index)"></image>
					<image class="" :src="item" mode="" @click="clickImg(item.url)"></image>
				</view>
				<view class="upload-img" v-show="isImage" @click="upload">
					<image class="icon" src="/static/img/add_img.png" mode="" style="width: 100%;height: 100%;"></image>
					<view class="up-img">添加图片</view>
				</view>
			</view>
		</view>
		<view class="idea-ok" @click="submit">提交</view>
		<view class="idea-list" @click="hanldIeadList()">反馈回复</view>
	</view>
	
	
  </view>
</template>

<script>
export default {
  data () {
    return {
  		len:150,
  		messtype:1,
  		mobile:wx.getStorageSync('riderMobile'),
  		message:'',
  		ideaText:"",//反馈问题
  		isImage:true,
  		images:[],      //图片
  		image_max: 3,    //用于前台判断上传图片按钮是否显示
  		refund_input_noedit: true,
  		mode: 'aspectFill'
    }
  },
   computed:{
   	contentLength(){
   		return this.message.length;
   	}
   },
  	onShow(){
  		
  	},
  methods: {
  	upload(){
  	     let that = this;
  	     uni.chooseImage({
  			count: 1,
  			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
  			sourceType: ['album'], //从相册选择
  			success: function (res) {
  				const tempFilePaths = res.tempFilePaths;
  				 // that.qrcode = tempFilePaths[0];
  				 console.log("tempFilePaths[0]",tempFilePaths[0])  //能够打印出选中的图片
  				 uni.uploadFile({
  					url: that.$urlConfig+'other/uploads',
  					filePath: tempFilePaths[0],
  					fileType: 'image',
  					name: 'file',
  					headers: {
  						'Accept': 'application/json',
  						'Content-Type': 'application/json'
  					},
  					success: (uploadFileRes) => {
  						console.log(uploadFileRes)
  						let data = JSON.parse(uploadFileRes.data)
  						uni.showToast({
  							title: data.msg,
  							icon: 'none'
  						})
  						that.images.push(data.data)
  					},
  					fail: (error) => {
  						if (error && error.response) {
  							console.log('error.response', error.response)
  							uni.showToast({
  								title: error.response,
  								icon: 'none'
  							})
  						}
  					},
  					complete: () => {
  						setTimeout(function() {
  							uni.hideLoading();
  						}, 250);
  					},
  				});
  			},
  			error : function(e){
  			 console.log(e);
  			}
  	    });
  	},
  	delImage(item,index){
  		this.images.splice(index, 1);
  	},
  	changeMessType(type){
  		this.messtype = type  
  	},
     hanldIeadList(){
  		 uni.navigateTo({
  		 	url:'/pages/member/horseman/manIdeaList'
  		 })
  	 },
  	 //提交问题反馈
  	 submit(){
  		if(!this.mobile){
  			uni.showToast({
  				title:'请输入联系方式',
  				icon:'none'
  			})
  			return
  		}
  		if(!this.message){
  			uni.showToast({
  				title:'请输入反馈内容',
  				icon:'none'
  			})
  			return
  		}
  		let formData = {
  			message:this.message,
  			images:this.images.join(','),
  			mobile:this.mobile,
  			messtype:this.messtype
  		}
  		this.$http.rider_feedback(formData).then(res => {
  			uni.showToast({
  				title:res.msg,
  				icon:'none'
  			})
  			if(res.code == 0){
  				//提交成功，重置data数据
  				Object.assign(this.$data, this.$options.data())
  				setTimeout(() => {
  					uni.navigateTo({
  						url:'/pages/member/horseman/manIdeaList'
  					})
  				},1000)
  			}
  		})
  	 }
  }
}
</script>

<style scoped>
	.question{
		width: 100%;
	}
	.type-title{
		color: #242424;
		font-size: 14px;
		font-weight: bold;
	}
	.type-title{
		padding: 15px 15px 0 15px;
	}
.type-but{
	width:208upx;
	height:58upx;
	background:rgba(187,187,187,0.1);
	border-radius:11upx;
	text-align: center;
	line-height: 58upx;
}
.type-but.select{

background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);

box-shadow: 0px 2px 4px 0px #1E75FF;
	color: #FFFFFF;
}
.type-wa{
	display: flex;
	flex-direction: row;
	    padding: 20upx 0 0 0;
}
.type-but{
	margin-left: 32upx;
}
.que-iphone{
  position: relative;	
}
.iphone-input{
	background-color: rgba(187, 187, 187, 0.1);
	height: 43px;
	margin: 15px 15px 0 15px;
	padding: 0 12px;
}
.iphone-tar{
	    background-color: rgba(187, 187, 187, 0.1);
	    height: 100px;
	    margin: 15px 15px 0 15px;
	    padding: 12px 12px 25px 12px;
	    width: auto;
}
.uni-input-placeholder{
	font-size: 12px;
	color: rgba(137, 137, 137, 1);
}
	
.uni-textarea-placeholder{
	font-size: 12px;
	color: rgba(137, 137, 137, 1);
}
.tar-num{
	    position: absolute;
	    bottom: 6px;
	    right: 27px;
	    color: rgba(137, 137, 137, 1);
}

/*图片*/
.fk_img{
		  width: 100%;
		  padding: 0 15px;
		  display: flex;
		  margin-top: 23px;
		}
		.up_img{
		  width:70px;
		  height: auto;
		  text-align: center;
		  position: relative;
		}
		.up_img image{
		  width: 70px;
		  height:70px;
		}
		.up_img input{
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  opacity: 0;
		}
		.up_img .text{
		  font-size:14px;
		  font-family:PingFang-SC-Medium;
		  font-weight:500;
		  color:rgba(120,120,120,1);
		}
		.list_img .info{
		  margin-left: 8px;
		}
		.list_img .info image{
		  width: 70px;
		  height: 70px;
		}
		.footer_btn{
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  width: 100%;
		  margin: 0;
		  height:48px;
		  border-radius: 0;
		  background:linear-gradient(90deg,rgba(159,205,164,1) 0%,rgba(54,157,65,1) 100%);
		}
		.list_img{
		  display: flex;
		  flex-wrap: wrap;
		}
		.evaluate-c-b{
			/* overflow: hidden; */
		}
		.upload-img{
		width: 80px;
		    height: 80px;
		    text-align: center;
		    color: #999999;
		    font-size: 11px;
		    border-radius: 2px;
		    display: inline-block;
		    float: left;
		    margin: 7px;
		}
		.goods-img-item{
		width: 80px;
		    height: 80px;
		    margin: 7px;
		    float: left;
		    position: relative;
		}
		.goods-img-item:nth-child(4n){
			margin-right: 0;
		}
		.goods-img-item image{
			width: 100%;
			height: 100%;
		}
		.del{
			width: 40upx !important;
			height: 40upx !important;
			position: absolute;
			right: -10px;
			top: 0;
			z-index: 999;
		}
		.up-img{
			color: rgba(137, 137, 137, 1);
			padding: 10px 0;
		}
		
			
		.idea-ok{
			width:618upx;
			height:80upx;
		
		background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);
box-shadow: none;
			border-radius:48upx;
			text-align: center;
			line-height: 80upx;
			color: #fff;
			font-size: 14px;
			margin: 110upx auto 0 auto;
		}
		.idea-list{
		width:618upx;
		height:76upx;
		border-radius:48upx;
		border:1px solid rgba(36,36,36,1);
			text-align: center;
			line-height: 76upx;
			color: rgba(36, 36, 36, 1);
			font-size: 14px;
			margin: 40upx auto 50px auto;
		}
</style>
